<template>
  <view class="navigation-bar" :style="[{ height: contentTop }, navigationStyle]">
    <view class="navigation" :style="{ position: 'fixed', top: menuTop, height: menuHeight }">
      <image mode="widthFix" :src="`${imgBasePath}newtask/go-back.png`" class="go-back" @click="goBack()"></image>
      <Text>{{ title }}</Text>
    </view>
  </view>
</template>

<script>
import { imgBasePath } from "@/common/config";
export default {
  name: "navigation-bar",
  props: {
    title: {
      type: String,
      default: ""
    },
    navigationStyle: {
      type: Object,
      default: function () {
        return {}
      },
    }
  },
  computed: {

  },
  methods: {
    goBack() {
      this.$emit("onBack");
    }
  },
  data() {
    return {
      // statusBarHeight: uni.getStorageSync('menuInfo').statusBarHeight, 
      menuWidth: '100%',
      menuHeight: uni.getStorageSync('menuInfo').menuHeight,
      // menuBorderRadius: uni.getStorageSync('menuInfo').menuBorderRadius,
      // menuRight: uni.getStorageSync('menuInfo').menuRight,
      menuTop: uni.getStorageSync('menuInfo').menuTop,
      contentTop: uni.getStorageSync('menuInfo').contentTop,
      imgBasePath,
    };
  }
}
</script>


<style lang="scss" scoped>

.navigation-bar {
  z-index: 10;
  width: 100vw;
  background-color: #fff;
}
.navigation {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30.8rpx;
  font-weight: 600;
  color: #fff;
  font-family: "PingFangSC-Semibold";
}

.go-back {
  position: absolute;
  width: 16.3px;
  left: 30.8rpx
}

</style>
